"use client";

import { FileArchive, Mars, Venus, X } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { useShallow } from "zustand/react/shallow";

import { LoadingAnimation } from "~/components/deer-flow/loading-animation";
import { ScrollContainer } from "~/components/deer-flow/scroll-container";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
} from "~/components/ui/drawer";
import { Separator } from "~/components/ui/separator";
import { queryTalents } from "~/core/api";
import { InterviewStore } from "~/core/store";

type Talent = {
  id: string;
  name: string;
  gender?: string;
  position_applied?: string;
  score?: number;
  age?: number;
  mobile?: string;
  education?: string;
  experience?: number;
  resume_url?: string;
  resume_match_url?: string;
  interview_question_url?: string;
  interview_record_url?: string;
  interview_evaluation_url?: string;
};

export function TalentPoolDrawer({
  open,
  setOpen,
}: {
  open: boolean;
  setOpen: (open: boolean) => void;
}) {
  const [loading, setLoading] = useState<boolean>(false);
  const [talents, setTalents] = useState<Talent[]>([]);
  const threadId = InterviewStore.useStore(
    useShallow((state) => state.threadId),
  );

  const loadTalents = useCallback(async () => {
    if (threadId) {
      setLoading(true);
      const response = await queryTalents(threadId);
      setTalents(response?.talents ?? []);
      setLoading(false);
    }
  }, [threadId]);

  useEffect(() => {
    if (open) {
      void loadTalents();
    }
  }, [open, loadTalents]);

  return (
    <Drawer open={open} onOpenChange={setOpen} direction="right">
      <DrawerContent className="max-w-[600px]!">
        <DrawerHeader>
          <DrawerTitle className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <FileArchive className="size-5" />
              人才库
            </div>
            <DrawerClose asChild>
              <Button size="sm" variant="ghost">
                <X className="size-4" />
              </Button>
            </DrawerClose>
          </DrawerTitle>
          <DrawerDescription className="hidden">
            查看当前面试流程中的候选人信息，包括简历、匹配报告、面试试题和评估结果。
          </DrawerDescription>
        </DrawerHeader>
        <div className="relative flex-1 overflow-hidden">
          <div
            data-hidden={!loading}
            className="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center data-[hidden=true]:hidden"
          >
            <LoadingAnimation />
          </div>
          {talents.length === 0 ? (
            <div className="flex h-full items-center justify-center">
              <div className="text-center">
                <div className="text-muted-foreground text-lg font-bold">
                  暂无人才
                </div>
              </div>
            </div>
          ) : (
            <ScrollContainer
              className="h-full w-full"
              scrollShadowColor="var(--card)"
            >
              <div className="flex flex-col gap-4 p-4">
                {talents.map((talent) => (
                  <TalentCard key={talent.id} talent={talent} />
                ))}
              </div>
            </ScrollContainer>
          )}
        </div>
      </DrawerContent>
    </Drawer>
  );
}

function TalentCard({ talent }: { talent: Talent }) {
  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>
          <div className="flex justify-between">
            <div className="flex items-center gap-1">
              <span>{talent.name}</span>
              {talent.gender === "男" && <Mars className="text-blue-400" />}
              {talent.gender === "女" && <Venus className="text-pink-400" />}
              <span className="ml-4">
                应聘岗位：{talent.position_applied ?? "--"}
              </span>
            </div>
            <div>{talent.score ?? "--"}分</div>
          </div>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex h-4 items-center justify-between space-x-4 text-sm">
          <div>手机：{talent.mobile ?? "--"}</div>
          <Separator orientation="vertical" />
          <div>年龄：{talent.age ?? "--"}岁</div>
          <Separator orientation="vertical" />
          <div>学历：{talent.education ?? "--"}</div>
          <Separator orientation="vertical" />
          <div>工作经验：{talent.experience ?? "--"}年</div>
        </div>
        <Separator className="my-4" />
        <div className="flex items-center justify-between space-x-4">
          <Button variant="outline" size="sm" disabled={!talent.resume_url}>
            <a href={talent.resume_url ?? "#"} target="_blank">
              人员简历
            </a>
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={!talent.resume_match_url}
          >
            <a href={talent.resume_match_url ?? "#"} target="_blank">
              匹配报告
            </a>
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={!talent.interview_question_url}
          >
            <a href={talent.interview_question_url ?? "#"} target="_blank">
              面试试题
            </a>
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={!talent.interview_record_url}
          >
            <a href={talent.interview_record_url ?? "#"} target="_blank">
              面试记录
            </a>
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={!talent.interview_evaluation_url}
          >
            <a href={talent.interview_evaluation_url ?? "#"} target="_blank">
              评估报告
            </a>
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
